import CodeEditor from "@/components/codemirror/CodeEditor";
import DisplayLabel from "@/components/displayLabel";
import { Descriptions, Divider, Flex, Input, Table } from "antd";
import styled from "styled-components";

const CallInformation = ({ fullData }) => {
  return <StyleWrap>
    <div className="header-bar">API接口信息</div>
    <Descriptions
      bordered
      column={1}
      labelStyle={{
        textAlign: 'center',
        width: '165px'
      }}
    >
      <Descriptions.Item label="服务地址">{fullData.accessUrl}</Descriptions.Item>
      <Descriptions.Item label="请求方法">{fullData.accessType}</Descriptions.Item>
    </Descriptions>
    <div className="header-bar">请求参数</div>
    <Table
      bordered
      pagination={false}
      columns={[
        {
          title: '参数名称',
          dataIndex: 'paramName',
          align: 'center'
        },
        {
          title: '参数说明',
          dataIndex: 'paramRemark',
          align: 'center'
        },
        {
          title: '参数类型',
          dataIndex: 'paramType',
          align: 'center',
          render: (text) => {
            return <DisplayLabel value={text} type="param_type"></DisplayLabel>
          }
        }
      ]}
      dataSource={fullData.paramList || []} />

    <Divider />
    <div className="section-title">请求示例</div>
    <Flex>
      <p style={{ flexShrink: 0, marginRight: 10 }}>请求地址</p>
      <Input value={fullData.accessUrl} readOnly />
    </Flex>
    <Flex style={{ marginTop: 10 }}>
      <div style={{ flex: 1 }}>
        <p>参数示例：</p>
        <CodeEditor readOnly={true} lang="json" value={JSON.stringify({ "resourceSign": fullData.id, "requestParams": [{ "paramName": "参数名", "paramValue": "参数值" }] }, null, 2)} height="200px" />
      </div>
      <Divider type="vertical" style={{ height: 'unset' }} />
      <div style={{ flex: 1 }}>
        <p>响应示例：</p>
        <CodeEditor readOnly={true} lang="json" value={JSON.stringify({ "success": true, "message": "操作成功！", "code": 200, "result": [], "timestamp": 1745931086622 }, null, 2)} height="200px" />
      </div>
    </Flex>
    {/* <div className="header-bar">返回参数</div>
    <Descriptions
      bordered
      column={1}
      labelStyle={{
        textAlign: 'center',
        width: '165px'
      }}
    >
      <Descriptions.Item label="zhName">code</Descriptions.Item>
      <Descriptions.Item label="name">code</Descriptions.Item>
      <Descriptions.Item label="type">无</Descriptions.Item>
      <Descriptions.Item label="length">无</Descriptions.Item>
      <Descriptions.Item label="desc">返回码； 200表示成功</Descriptions.Item>
    </Descriptions> */}
  </StyleWrap>;
}

const StyleWrap = styled.div`
  .header-bar {
    padding: 12px 24px;
    color: rgba(255, 255, 255, 0.65);
    background-color: #002f5c;
    border-left: 1px solid rgba(116, 186, 251, 0.43);
    border-right: 1px solid rgba(116, 186, 251, 0.43);
    font-size: 16px;
    &:first-child{
      border-top: 1px solid rgba(116, 186, 251, 0.43);
    }
  }

  .ant-descriptions .ant-descriptions-view{
    border-radius: 0;
  }
  .ant-table-wrapper .ant-table-container{
    border-radius: 0;
  }
  .ant-table-wrapper .ant-table{
    border-radius: 0;
  }
  .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {
    border-radius: 0;
}
`

export default CallInformation;